<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>组织列表 - 后台管理 - smoothly</title>
    <!-- 引入网站头部 -->
    <meta th:replace="~{include/all_include ::  title}"/>
    <link th:href="@{/common/resource/H-ui.admin/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css}" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .ztree li span.button.firstPage {float:right; margin-left:2px; margin-right: 0; background-position:-144px -16px; vertical-align:top; *vertical-align:middle}
        .ztree li span.button.prevPage {float:right; margin-left:2px; margin-right: 0; background-position:-144px -48px; vertical-align:top; *vertical-align:middle}
        .ztree li span.button.nextPage {float:right; margin-left:2px; margin-right: 0; background-position:-144px -64px; vertical-align:top; *vertical-align:middle}
        .ztree li span.button.lastPage {float:right; margin-left:2px; margin-right: 0; background-position:-144px -32px; vertical-align:top; *vertical-align:middle}
    </style>
</head>
<body>
<!-- body的标题栏 -->
<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i> 首页
    <span class="c-gray en">&gt;</span> 系统管理
    <span class="c-gray en">&gt;</span> 组织管理
    <a class="btn btn-success radius r btn-refresh" style="line-height:1.6em;margin-top:3px"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="Hui-iconfont">&#xe68f;</i>
    </a>
</nav>
<!-- 内容 -->
<div class="page-container">
    <div class="cl pd-5 bg-1 bk-gray mt-20">
        <div id="rootNode" th:text="${dataList}" style="display: none"></div>
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</div>
<!-- 引入公共的头部 -->
<footer th:replace="~{include/all_include ::  footer}"/>
<script type="text/javascript" th:src="@{/common/resource/H-ui.admin/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
    /* js中获取的项目根路径 */
    var rootPath = [[@{/}]];

    var setting = {
        async: {
            enable: true,
            url: getUrl
        },
        view: {
            dblClickExpand: false,
            showLine: false,
            selectedMulti: false
        },
        data: {
            simpleData: {
                enable:true,
                idKey: "id",
                pIdKey: "parentId",
                rootPId: ""
            }
        },
        callback: {
            onAsyncError: onAsyncError
        }
    };

    var zNodes = JSON.parse($("#rootNode").html());
    /*
    var zNodes =[
        {name:"分页测试", t:"请点击分页按钮", id:"1", count:2000, page:0, pageSize:100, isParent:true}
    ];
     */

    /* 当前页 */
    var currentPage = 0;

    /**
     * 跳转到指定的页面,获取数据
     * @param treeId
     * @param treeNode
     * @returns {string}
     */
    function getUrl(treeId, treeNode) {
        var currParam = "&entity.parentId=" + treeNode.id;
        return rootPath + "/back/system/regionTreeData?" + currParam;
    }

    /**
     * 异步错误
     * @param event
     * @param treeId
     * @param treeNode
     * @param XMLHttpRequest
     * @param textStatus
     * @param errorThrown
     */
    function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        alert("异步获取数据出现异常。");
        treeNode.icon = "";
        zTree.updateNode(treeNode);
    }

    $(document).ready(function(){
        var t = $("#treeDemo");
        t = $.fn.zTree.init(t, setting, zNodes);
        var zTree = $.fn.zTree.getZTreeObj("tree");
    });
</script>
</body>
</html>